<ng-container *ngIf="confirmModalPayload$ | async as confirmModalPayload">
  <div class="modal-header">
    <h4 class="modal-title">{{ confirmModalPayload?.title }}</h4>
  </div>
  <div class="modal-body p-0">
    <p class="px-3 pt-2">{{ confirmModalPayload?.text }}</p>
    <ng-container *ngIf="confirmModalPayload?.list$ | async as itemList">
      <ul *ngIf="itemList.length > 0" class="list-group pb-3">
        <li class="list-group-item" *ngFor="let item of itemList">
          <div class="text-truncate">{{ item }}</div>
        </li>
      </ul>
    </ng-container>
    <div *ngIf="confirmModalPayload.sub" class="px-3 pb-2">
      <small>
        <app-svg
          [icon]="confirmModalPayload.subIcon"
          class="{{ confirmModalPayload.subIconClass }} me-2"
        ></app-svg>

        <span [innerHTML]="confirmModalPayload.sub"></span>
      </small>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="close()">
      {{ confirmModalPayload.confirmButtonText || 'Confirm' }}
    </button>
    <button type="button" class="btn btn-secondary" (click)="dismiss()">
      {{ confirmModalPayload.cancelButtonText || 'Cancel' }}
    </button>
  </div>
</ng-container>
